import React from 'react'
import { View, Image } from 'react-native'
import { Lt, Color, Label, Touch, Jpp, Jx, Cimage } from "../_utils"
import { eApp, cHome } from "./_home"
import { LabelGoodsTitle } from '../_util';

// xx元券 四个缺角
class ViewGap extends React.PureComponent{
    render(){
        let {style, gapRadius, gapColor, children, ...other} = this.props;
        style = {
            width:70,
            height:22,
            backgroundColor:Color.theme,
            justifyContent:"center",
            alignItems:"center",
            ...style,
        }
        const {width, height} = style;
        const gap = gapRadius * 2;
        const viewGap = <View style={{width:gap, height:gap, borderRadius:gapRadius,backgroundColor:gapColor}}/>
        return <View style={style} {...other}>
            <View style = {{width:width+gap, height:height+gap, left:-gapRadius, top:-gapRadius, position:"absolute", flexDirection:"row", justifyContent:"space-between"}}>
                <View style={{flex:1,justifyContent:"space-between"}}>
                    {viewGap}
                    {viewGap}
                </View>
                <View style={{flex:1,justifyContent:"space-between", alignItems:"flex-end"}}>
                    {viewGap}
                    {viewGap}
                </View>
            </View>
            <Label style = {{color:"white"}}>{children}</Label>
        </View>;
    }
}

// 平台标识
export class ViewEprice extends React.PureComponent{
    render(){
        const {style, appIdx, field} = this.props;
        const ePrice = field || eApp.fields[eApp.idxs[appIdx]];
        return <View style = {{borderColor:Color.theme, borderWidth:1, ...style}}>
            <Label style = {{color:Color.theme, fontSize:Lt.c13}}>{ePrice}</Label>
        </View>
    }
}

// 原价 划线
class LabelPriceOri extends React.PureComponent{
    render(){
        let {style, children} = this.props;
        children = children ? ("¥"+children) : "";
        return <Label style = {{color:Color.c9, textDecorationLine:"line-through", ...style}}>{children}</Label>
    }
}

// 销量
class LabelSales extends React.PureComponent{
    render(){
        const {style, children} = this.props;
        return <Label style = {{color:Color.c9, fontSize:Lt.c13, ...style}}>
            {"月销 "}
            <Label style = {{color:Color.c9, fontSize:Lt.c14}}>{children}</Label>
        </Label>
    }
}

// 原价 划线 现价
class LabelPrice extends React.PureComponent{
    render(){
        let { style, priceOri, price } = this.props;
        if(price == priceOri){
            priceOri = "";
        }
        return <Label style = {{color:"red", ...style}}>
            ¥
            <Label style = {{color:"red", fontSize:Lt.c18}}>{price}</Label>
            {" "}
            <LabelPriceOri>{priceOri}</LabelPriceOri>
        </Label>
    }
}

// 分享赚
class LabelSpread extends React.PureComponent{
    render(){
        const {style, field, children} = this.props;
        return <Label style = {{color:Color.theme, fontSize:Lt.c12, ...style}}>
            {(field || "推广赚") + " "}
            <Label style = {{color:Color.theme, fontSize:Lt.c14}}>{children}</Label>
        </Label>
    }
}

// 券额
class LabelCoupon extends React.PureComponent{
    render(){
        const {style, coupon} = this.props;
        return <ViewGap style={style} gapRadius={3} gapColor={"white"}>
            {coupon}
            <Label style = {{color:"white", fontSize:Lt.c12}}>{"元券"}</Label>
        </ViewGap>;        
    }
}

// 商品描述（平台标识，标题，销量，价格，券额，代理赚）
export class ViewGoodsContent extends React.PureComponent{
    render(){
        let {style, data} = this.props;
        return <View style={style}>
            <ViewEprice style={{position:"absolute"}} appIdx={data.appIdx}/>
            <LabelGoodsTitle indent={true}>{data.goodName}</LabelGoodsTitle>
            <LabelSales style={{marginTop:5, alignSelf:"flex-end"}}>{data.volume}</LabelSales>
            <LabelPrice style={{marginTop:5}} priceOri={data.price} price={data.zk_price}/>
            <View style = {{marginTop:5, flexDirection:"row", justifyContent:"space-between", alignItems:"center"}}>
                { data.zk_money ? <LabelCoupon coupon={data.zk_money}/> : null }
                { data.agent ? <LabelSpread>{data.agent}</LabelSpread> : null }
            </View>
        </View>
    }
}

// 商品描述（for商品详情页）
export class ViewGoodsContentForDetail extends React.PureComponent{
    render(){
        let {style, data} = this.props;
        return <View style={style}>
            <ViewEprice style={{position:"absolute"}} appIdx={data.appIdx}/>
            <LabelGoodsTitle indent={true}>{data.goodName}</LabelGoodsTitle>
            <View style = {{marginTop:5, flexDirection:"row", justifyContent:"space-between", alignItems:"center"}}>
                <LabelPrice style={{marginTop:5}} priceOri={data.price} price={data.zk_price}/>
                <LabelSales style={{marginTop:5, alignSelf:"flex-end"}}>{data.volume}</LabelSales>
            </View>
        </View>
    }
}

// 商品描述（for商品分享页）
export class ViewGoodsContentForShare extends React.PureComponent{
    render(){
        let {style, data} = this.props;
        return <View style={style}>
            <ViewEprice style={{position:"absolute"}} appIdx={data.appIdx}/>
            <LabelGoodsTitle indent={true}>{data.goodName}</LabelGoodsTitle>
            <LabelSales style={{marginTop:5, alignSelf:"flex-end"}}>{data.volume}</LabelSales>
            <View style = {{marginTop:5, flexDirection:"row", justifyContent:"space-between", alignItems:"center"}}>
                <LabelPrice style={{marginTop:5}} priceOri={data.price} price={data.zk_price}/>
                { data.agent ? <LabelSpread field={"预计赚"}>{data.agent}</LabelSpread> : null }
            </View>
        </View>
    }
}

// 商品描述（for商品合成图）
export class ViewGoodsContentForCombine extends React.PureComponent{
    render(){
        let {style, data} = this.props;
        const priceShow = (data.zk_price == data.price) ? "" : data.price;
        return <View style={style}>
            <View>
                <View style = {{position:"absolute", borderColor:Color.theme, borderWidth:1}}>
                    <Label style = {{color:Color.theme, fontSize:Lt.c16}}>{eApp.fields[eApp.idxs[data.appIdx]]}</Label>
                </View>
                <LabelGoodsTitle indent={true} style={{fontSize:Lt.c18}}>{data.goodName}</LabelGoodsTitle>
            </View>
            <View style={{flexDirection:"row", justifyContent:"space-between", alignItems:"center", marginTop:Lt.margin}}>
                <Label style = {{color:"red", fontSize:Lt.c20}}>
                    ¥
                    <Label style = {{color:"red", fontSize:27}}>{data.zk_price}</Label>
                    {" "}
                    <LabelPriceOri style={{fontSize:Lt.c16}}>{priceShow}</LabelPriceOri>
                </Label>
                {
                    (!data.zk_money) ? <View/> : 
                    <ViewGap gapRadius={4} gapColor={Color.back} style={{width:85, height:30}}>
                        <Label style={{fontSize:Lt.c18}}>{data.zk_money}</Label>
                        <Label style={{fontSize:Lt.c14}}>元券</Label>
                    </ViewGap>
                }
            </View>
        </View>
    }
}

// 商品图组件 拼多多有些商品没有图片, 需要额外从详情信息获取图片组的第一张
export class Gimage extends React.PureComponent{
    constructor(props){
        super(props);
        const { imgUrl } = this.props.data;
        this.state = {
            imgUrl,
        };
        if(!imgUrl){
            this.fetImages(this.props);
        }
    }
    componentWillUnmount(){
        this.unmounted = true;
    }
    componentWillReceiveProps(props){
        const { imgUrl } = props.data;
        this.setState({imgUrl});
        if(!imgUrl){
            this.fetImages(props);
        }
    }
    fetImages(props){
        const { data } = props;
        cHome.fetImages(data).then(details=>{
            if(!this.unmounted){
                this.setState({imgUrl : details[0]});
            }
        }).catch(err=>{
            console.warn(Jx.stringify(err));
        })
    }
    render(){
        const { data, uri, ...other } = this.props; 
        return <Cimage  uri = { this.state.imgUrl } {...other}/>;
    }
}

export class GoodsHor extends React.PureComponent{
    render(){
        let {style, wh, data} = this.props;
        return <View style = {{height:wh, flexDirection: "row", ...style}}>
            <Gimage 
                style = {{width:wh, height:wh, borderRadius:Lt.radius}} 
                data = {data}
            />
            <ViewGoodsContent
                style = {{flex:1,marginTop:5, marginLeft:Lt.margin, marginRight:5}} 
                data = {data}
            />
    </View>
    }
}

const goodsStyle = {
    borderRadius:4, 
    borderColor:Color.line, 
    borderWidth:1, 
    padding:5, 
};
const goodsInnerStyle = {
    borderRadius:4, 
    backgroundColor:"white",
};

// 商品组件(横向)
export class TouchGoodsHor extends React.PureComponent{
    render(){
        let {style, wh, data} = this.props;
        return <Touch 
            onPress = {cHome.jump2detail.bind(cHome, data)}
            style = {{padding:Lt.pad, borderColor:Color.line, borderBottomWidth:1, ...style}}
        >
            <GoodsHor wh = {wh} data = {data}/>
        </Touch>;
    }
}

// 商品组件(for爆款)
export class TouchGoodsHotCake extends React.PureComponent{
    render(){
        let {style, wh, data} = this.props;
        return <Touch 
            onPress = {cHome.jump2detail.bind(cHome, data)}
            style = {{...goodsStyle, ...style}}
        >
            <GoodsHor style={goodsInnerStyle} wh = {wh} data = {data}/>
        </Touch>;
    }
}

// 商品组件（自带点击跳详情页）
export class TouchGoodsVer extends React.PureComponent{
    render(){
        const {style, wh, data} = this.props;
        return <Touch style={{...goodsStyle, ...style}} onPress={cHome.jump2detail.bind(cHome, data)}>
            <View style={goodsInnerStyle}>
                <Gimage
                    style = {{width:wh, height:wh}}
                    data = {data}
                />
                <ViewGoodsContent
                    style = {{marginTop:5,width:wh}}
                    data = {data}
                />
            </View>
        </Touch>
    }
}
